<template>
  <div class="user_details">

    <!--面包屑导航模板-->
    <el-breadcrumb class="topNav" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/sys_management/user_manage'}">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/sys_management/user_manage'}">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!--标题模板-->
    <el-row>
      <el-col :span="24"><div class="title-template">用户详情</div></el-col>
    </el-row>


    <div class="info-template-content">
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">用户名</el-col>
        <el-col :span="19" style="color: #333">{{userMing}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">用户姓名</el-col>
        <el-col :span="19" style="color: #333">{{user_name}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">用户角色</el-col>
        <el-col :span="19" style="color: #333">{{role}}</el-col>
      </el-row>
      <el-row class="item-row" >
        <el-col :span="3" style="color: #666">手机号码</el-col>
        <el-col :span="19" style="color: #333">{{phoneNumber}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">邮箱</el-col>
        <el-col :span="19" style="color: #333">{{email}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">操作员员状态</el-col>
        <el-col :span="19" style="color: #333">{{state}}</el-col>
      </el-row>
      <el-row class="item-row">
        <el-col :span="3" style="color: #666">所属单位</el-col>
        <el-col :span="19" style="color: #333">{{company}}</el-col>
      </el-row>

    </div>

  </div>
</template>

<script>

  export default {
    data(){
      return{
        labelPosition:'left',
        user_name: '',
        userMing:'',
        role:'',
        phoneNumber:'',
        state:'',
        email:'',
        company:'',
        checkList:[],
        checkAll:false,
        isIndeterminate: true

      }
    },
    methods:{
      backData(){
        var  data = this.$route.query.row;

        console.log(data)
        this.user_name= data.name;
        this.userMing=data.userMing;
        this.role=data.role;
        this.phoneNumber='';
        this.state=data.state;
        this.company='';


      }
    },
    created(){
      this.backData()
    }
  }
</script>

<style scoped>
  .user_details .topNav{
    margin-left: 30px;
    margin-bottom: 20px;
  }
  .user_details .title-template{
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    padding-left: 30px;
    margin-bottom: 10px;
    color: #333333;
    background: #ffffff;
  }

  .info-template-content{
    background: #ffffff;
    padding: 50px;
  }
  .item-row{
    margin-bottom: 50px;
    font-size: 16px;
  }

</style>

